<template>
    <div style="min-width:809px">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="form" label-width="90px">
                <el-form-item label="门店">
                    <el-select v-model="form.username" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打赏时间">
                    <el-date-picker
                        v-model="form.date"
                        type="daterange"
                        align="right"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="timestamp"
                        @change="pickerDate"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="打赏项目">
                    <el-select v-model="form.username" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打赏金额">
                    <el-select v-model="form.username" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="right">
                <el-button >重置</el-button>
                <el-button  type="primary">查询</el-button>
            </div>
            </div>
        <div class="vs-table-box">
            <div class="operation-box">
                <el-button  icon="el-icon-upload2">导出</el-button>
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column width="60px" type="selection" ></el-table-column>
                <el-table-column width="60px" label="ID" prop="t1" ></el-table-column>
                <el-table-column prop="t2" label="门店" > </el-table-column>
                <el-table-column prop="t3" label="员工姓名"> </el-table-column>
                <el-table-column prop="t4" label="打赏时间"> </el-table-column>
                <el-table-column prop="t5" label="打赏金额（元）"> </el-table-column>
                <el-table-column prop="t6" label="打赏项目"> </el-table-column>
                <el-table-column prop="t7" label="打赏顾客姓名"> </el-table-column>
                <el-table-column prop="t8" label="打赏手机号"> </el-table-column>
                <el-table-column fixed="right" width="140" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="dialogVisible = true">查看</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div> -->
        </div>
        <!-- 打赏详情 -->
       <el-dialog
        title="打赏详情"
        :visible.sync="dialogVisible"
        width="570px" >
            <el-form label-position="left"  label-width="100px" class="ruleForm">
                <el-form-item label="门店：" >
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名：" >
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="职位：" >
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="评价星级：" >
                    <el-rate v-model="value1"></el-rate>
                </el-form-item>
                <el-form-item label="评级内容：" >
                    <el-input v-model="ruleForm.code" type="textarea" :rows="4"></el-input>
                </el-form-item>
                <el-form-item label="本次打赏记录" class="lastItem"></el-form-item>
            </el-form>
            <el-table
                :data="tableData1"
                style="width: 100%">
                <el-table-column
                    prop="t1"
                    label="打赏时间"
                >
                </el-table-column>
                <el-table-column
                    prop="t2"
                    label="打赏金额（元）"
                    >
                </el-table-column>
                <el-table-column
                    prop="t3"
                    label="打赏时间">
                </el-table-column>
                <el-table-column
                    prop="t4"
                    label="打赏手机号">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button >取消</el-button>
                <el-button type="primary" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value1:4,
            dialogVisible:false,
            options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            form:{
                username:'',
                date:''
            },
            ruleForm:{
                username:'',
            },
            loading:false,
            tableData: [
                {
                    t1:1001,
                    t2:'正大店',
                    t3:'沈小太',
                    t4:'2021-07-15 15:30:25',
                    t5:'10.00',
                    t6:'足疗',
                    t7:'孙悟空',
                    t8:'17630532222',
                },
                
            ],
            tableData1:[{
                t1:'2020-01-02',
                t2:'20.00',
                t3:'套餐一',
                t4:'17630568059'
            }]
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 1:
                    val = '内部'
                    break;
                case 2:
                    val = '外部'
                    break;
            }
            return val;
        }
    },
    created() {
    },
    methods: {
        pickerDate(){

        },
        change(){

        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 150px;
    }
}
.red{
    color: #f00 !important;
}
.operation-box{
    display: flex;
    justify-content: flex-end;
}
::v-deep{
    .ruleForm{
        .el-input{
            width: 260px;
        }
        .el-textarea{
            width: 260px;
        }
        .el-rate{
           margin-top: 8px;
        }
        .el-rate__icon{
            font-size: 24px;
        }
    }
}
.lastItem{
    margin-bottom: 0;
}
</style>